import React , { useEffect }from 'react'
import '../reg/style.scss'
import { goReg } from '@a/home'
import { useNavigate } from 'umi'
import {
  Form,
  Input,
  Button,
  Toast
} from 'antd-mobile'
export default function index() {
  const navigate = useNavigate()
  const regUser = (params:{username:string,pwd:string}) => {
    goReg(params).then(res => {
      if (res.data.code === 0) {
        Toast.show({
          icon: 'success',
          content: '注册成功',
        })
      }
      if (res.data.code === 10000) {
        Toast.show({
          icon: 'fail',
          content: '用户名已存在',
        })
      }
      
    })
  }
  return (
    <div className='reg'>
      <div className="reg-mian">
        <Form 
        layout='horizontal'
        onFinish={regUser}
        >
          <Form.Item
            name='username'
            label='姓名'
            rules={[{ required: true, message: '姓名不能为空' }]}
          >
            <Input onChange={console.log} placeholder='请输入姓名' 
            style={{
              lineHeight: 40,
              height:40
            }}
            />
          </Form.Item>
          <Form.Item
            name='pwd'
            label='密码'
            rules={[{ required: true, message: '密码不能为空' }]}
          >
            <Input onChange={console.log} placeholder='请输入密码'
              style={{
                lineHeight: 40,
                height:40
              }}
            />
          </Form.Item>
          <div className="reg-but">
            <Button block color='primary' size='large' type='submit'>
              注册
            </Button>
            <Button block color='primary' size='large' type='reset'>
              重置
            </Button>
          </div>
          <Button block color='primary' size='large'
          onClick={
            () => {
              navigate('/login')
            }
          }
          >
            立即登录
          </Button>
        </Form>
      </div>
    </div>
  )
}